
<!DOCTYPE html>
<html lang="zh-cn">

<head><meta name="generator" content="Hexo 3.8.0">
    <title>
        Hello world - Admui 开发文档</title>
    <meta charset="utf-8">
    <meta name="keywords" content="admui,admui官网,admui框架,通用后台管理系统,后台框架,ui框架">
    <meta name="description" content="Admui 是一个基于最新 Web 技术的企业级通用管理系统快速开发框架，可以帮助企业极大的提高工作效率，节省开发成本，提升品牌形象">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!--[if lte IE 9]>
    <meta http-equiv="refresh" content="0; url='http://www.admui.com/ie'" />
    <![endif]-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">
    <meta name="msapplication-TileImage" content="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <meta name="msapplication-TileColor" content="#395b81">
    <link rel="apple-touch-icon-precomposed" href="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <link rel="shortcut icon" href="http://cdn.admui.com/site/img/app/favicon.png">
    <meta name="msapplication-TileColor" content="#62a8ea">
    <script>
        window.PAGE_TYPE = "ui"
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?cd758c4c82a4964836712308cb782b12";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <link rel="stylesheet" href="http://cdn.admui.com/docs/v1/css/page.css">
</head>

<body>
    <div id="mobile-bar">
        <a class="menu-button"></a>
        <a class="logo" href="../../index.html">Admui开发文档</a>
        <select class="version-select">
            <option value="basic">基础版</option>
            <option value="pjax" selected>pjax版</option>
            <option value="iframe">iframe版</option>
        </select>
    </div>
    <div id="header">
    <a id="logo" href="../../index.html">
        <img src="http://cdn.admui.com/docs/common/images/logo.svg"> <span>Admui 开发文档</span>
    </a>
    <select class="version-select">
        <option value="basic/1.x">基础版</option>
        <option value="pjax/1.x" selected>pjax版</option>
        <option value="iframe/1.x">iframe版</option>
    </select>
    <ul id="nav">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../../index.html" class="nav-link">v2版本</a>
</li>

    </ul>
</div>
    
    <div id="main" class="fix-sidebar">
        
        
<div class="sidebar">
    <ul class="main-menu">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../../index.html" class="nav-link">v2版本</a>
</li>

    </ul>
    <div class="list">
        <ul class="menu-root">
            
            <li>
                <a href="index.html" class="sidebar-link ">基本概述</a>
            </li>
            
            <li>
                <a href="themes.html" class="sidebar-link ">主题说明</a>
            </li>
            
            <li>
                <a href="build.html" class="sidebar-link ">构建工具</a>
            </li>
            
            <li>
                <a href="files.html" class="sidebar-link ">入口文件</a>
            </li>
            
            <li>
                <a href="structure.html" class="sidebar-link ">模板结构</a>
            </li>
            
            <li>
                <a href="hello-world.html" class="sidebar-link current ">Hello world</a>
            </li>
            
            <li>
                <a href="style.html" class="sidebar-link ">自定义样式</a>
            </li>
            
            <li>
                <a href="javascript.html" class="sidebar-link ">JS 模块</a>
            </li>
            
            <li>
                <a href="components.html" class="sidebar-link ">UI 组件</a>
            </li>
            
            <li>
                <a href="plugins.html" class="sidebar-link ">第三方插件</a>
            </li>
            
            <li>
                <a href="icons.html" class="sidebar-link ">字体图标</a>
            </li>
            
            <li>
                <a href="code-guide.html" class="sidebar-link ">编码规范</a>
            </li>
            
        </ul>
    </div>
</div>


<div class="content ui with-sidebar">
    <h1>Hello world</h1>
    <h2 id="Hello-world"><a href="#Hello-world" class="headerlink" title="Hello world"></a>Hello world</h2><h3 id="开始写第一个页面"><a href="#%E5%BC%80%E5%A7%8B%E5%86%99%E7%AC%AC%E4%B8%80%E4%B8%AA%E9%A1%B5%E9%9D%A2" class="headerlink" title="开始写第一个页面"></a>开始写第一个页面</h3><p>在<code>/src/pages/examples/pages/general/</code>下，我们为您准备了一个空白页面（blank.html），大概结构如下：</p>
<blockquote>
<p>Notes: 如果您是 build 后用于生产环境的版本，在<code>/views/examples/pages/general/</code>下。</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>空白页面<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page animation-fade page-blank"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page-content"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>空白页面<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是一个空白页面。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>您可以复制<code>blank.html</code>到需要的地方，重命名为<code>hello-world.html</code>，然后修改代码中的<code>.page-blank</code>，为<code>.page-hello-world</code>。并根据自己的需要修改<code>title</code>，<code>.page-hello-world</code>的内容。</p>
<blockquote>
<p>Notes：为什么没有这个页面没有<code>&lt;!DOCTYPE html&gt;</code>,<code>&lt;html&gt;</code>,<code>&lt;head&gt;</code>，<code>&lt;body&gt;</code>等这些标签呢？实质上这是由于Admui 特殊的 Pjax 加载机制所决定的，事实上，Admui是基于HTML5开发的，HTML5中可以忽略这些标签，甚至在谷歌等一些大公司制定的规范中，是不提倡写这些标签的。</p>
</blockquote>
<h3 id="链接页面"><a href="#%E9%93%BE%E6%8E%A5%E9%A1%B5%E9%9D%A2" class="headerlink" title="链接页面"></a>链接页面</h3><p>Admui 是一个 Pjax 项目，当您要链接页面时您只需要在 <code>&lt;a&gt;</code>标签中加入<code>data-pjax</code>即可。如下：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;a href=&quot;/examples/menu.html&quot; data-pjax target=&quot;_blank&quot;&gt;&lt;/a&gt;</span><br></pre></td></tr></table></figure>
<p>您只需要添加相对地址即可。使用<code>data-pjax</code>默认会将响应页面添加到右侧主体部分，如果您需要添加到指定区域，可以赋予<code>data-pjax</code>指定区域<code>id</code>。如：<code>data-pjax=&quot;#admui-pageMenu&quot;</code></p>
<p>您也可以使用<code>target=&quot;_blank&quot;</code>来定义新建标签页或在当前页加载内容。</p>
<h3 id="为页面添加样式"><a href="#%E4%B8%BA%E9%A1%B5%E9%9D%A2%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F" class="headerlink" title="为页面添加样式"></a>为页面添加样式</h3><h4 id="1-使用LESS预编译"><a href="#1-%E4%BD%BF%E7%94%A8LESS%E9%A2%84%E7%BC%96%E8%AF%91" class="headerlink" title="1. 使用LESS预编译"></a>1. 使用LESS预编译</h4><p>并在<code>/src/assets/less/</code>下合适的位置新建一个<code>hello-world.less</code>文件，并插入以下代码：</p>
<figure class="highlight less"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.page-hello-world</span>&#123; <span class="comment">// 避免全局污染</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 将所有本页面的样式代码写到这个代码块中</span></span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>less 文件最终会自动编译成 CSS 文件，CSS 文件存放在<code>/public/css/</code>对应的文件夹下。您可以直接在页面中引用。</p>
<p>LESS 文件会在项目运行的时候编译。我们也提供能了增量编译和浏览器自动刷新保证在项目运行中编辑 LESS 文件时进行编译。关于如何运行项目，请参考<a href="build.html">构建工具</a>。</p>
<p>如果您所购买的产中不包含Gulp自动构建的部分，您可以可以直接在<code>/public/css/</code>下新建 css 文件并添加代码，或者通过在线升级的方式购买自动构建部分。<a href="http://www.admui.com/buy" target="_blank" rel="noopener">升级</a></p>
<h5 id="几个问题："><a href="#%E5%87%A0%E4%B8%AA%E9%97%AE%E9%A2%98%EF%BC%9A" class="headerlink" title="几个问题："></a>几个问题：</h5><p>1）如何在 LESS 文件中使用 Admui 定义的 LESS 变量呢？在 LESS 文件的头部引入定义变量的文件就可以了。如下所示：</p>
<figure class="highlight less"><table><tr><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">'../../../themes/classic/global/less/vars'</span>;</span><br><span class="line"> </span><br><span class="line"><span class="selector-class">.page-hello-world</span>&#123;</span><br><span class="line">    ……</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>2）如何自定义 Admui 的 LESS 全局变量？Admui中如下几处地方可以定义 LESS 的全局变量，您可以找到<code>/src/themes/(主题文件夹)/global/less/vars-customs.less</code>，并根据自己的需要添加。</p>
<h4 id="2-使用CSS"><a href="#2-%E4%BD%BF%E7%94%A8CSS" class="headerlink" title="2. 使用CSS"></a>2. 使用CSS</h4><p>在<code>/public/css/</code>文件夹下合适的位置新建一个<code>hello-world.css</code>文件，并插入以下代码：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.page-hello-world</span>&#123; <span class="comment">/* 避免全局污染 */</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">/* 将所有本页面的样式代码写到这个代码块中 */</span></span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>完成后直接在页面中引用这个 CSS 文件即可。</p>
<h3 id="为页面添加JS"><a href="#%E4%B8%BA%E9%A1%B5%E9%9D%A2%E6%B7%BB%E5%8A%A0JS" class="headerlink" title="为页面添加JS"></a>为页面添加JS</h3><p>在<code>/src/assets/js/</code>文件夹下合适的位置新建一个<code>hello-world.js</code>文件，并插入以下代码：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">(function () &#123;</span><br><span class="line">    &apos;use strict&apos;;</span><br><span class="line"></span><br><span class="line">    window.Content = &#123;</span><br><span class="line">        run: function () &#123;</span><br><span class="line">            this.render();</span><br><span class="line">            ...</span><br><span class="line">        &#125;,</span><br><span class="line">        render: function()&#123;</span><br><span class="line">            console.log(&apos;hello world&apos;);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">&#125;());</span><br></pre></td></tr></table></figure>
<p>JS文件最终会自动输出到<code>/public/js/</code>对应的文件夹下。您可以直接在页面中引用。</p>
<p>如果您所购买的产中不包含Gulp自动构建的部分，您可以可以直接在<code>/public/js/</code>下新建 js 文件并添加代码，或者通过在线升级的方式购买自动构建部分。<a href="http://www.admui.com/buy" target="_blank" rel="noopener">升级</a></p>
<h5 id="几个问题：-1"><a href="#%E5%87%A0%E4%B8%AA%E9%97%AE%E9%A2%98%EF%BC%9A-1" class="headerlink" title="几个问题："></a>几个问题：</h5><p>1） Admui 不支持内联的 js。<br>2） Admui 是通过 Pjax 来加载页面的，其中的 js 文件都是异步加载的，并不会按照 js 文件顺序进行运行。因此，对于引用插件有依赖关系的，可以通过<code>data-name</code>和<code>data-deps</code>来写入依赖关系，Admui 会根据 data 属性对依赖的 js 进行同步加载，如：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script src=&quot;/public/vendor/chartist-js/chartist.js&quot; data-name=&quot;chartist&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src=&quot;/public/vendor/chartist-plugin-tooltip/chartist-plugin-tooltip.js&quot; data-deps=&quot;chartist&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>3） 为什么要通过 <code>window.Content</code> 对象这样的形式来写js呢？因为通过<code>window.Content</code>对象写，Admui 会在新建标签页时保证添加的 js 文件顺序运行。当然您也可以不使用该对象，此时您就需要在引入该 js 文件时增加对其他文件的依赖关系。<br>4） 绑定事件时，尽可能的绑定在 <code>$(&#39;#admui-pageContent&#39;)</code> 对象上。在新打开标签页时，我们会解绑该对象上的事件，避免造成污染。</p>
<h3 id="相对路径与绝对路径"><a href="#%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E4%B8%8E%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84" class="headerlink" title="相对路径与绝对路径"></a>相对路径与绝对路径</h3><p>通常情况下，相对路径一般使用较多，但是在 Admui 中，我们提倡使用绝对路径，这样可以避免很多问题。</p>
<h2 id="进阶"><a href="#%E8%BF%9B%E9%98%B6" class="headerlink" title="进阶"></a>进阶</h2><p>在我们提供给您的 Admui 源码包中，包含了大量的示例（根据套餐的不同可能会有所差异），您可以参考这些示例来开发自己的页面。</p>

    
    <div class="page-links">
        
        <span><a href="structure.html">&lang; 上一页：模板结构</a></span>
        
        
        <span style="float:right"><a href="style.html">下一页：自定义样式 &rang;</a></span>
        
    </div>
    
    <div class="footer">
    &copy; 2015-2017
    <a href="http://www.admui.com/">Admui</a>
    ·
    上海畅控
</div>
</div>

        
    </div>
    

    <script src="https://cdn.staticfile.org/smooth-scroll/14.2.1/smooth-scroll.min.js"></script>
    <script src="http://cdn.admui.com/docs/common/js/common.js"></script>

    <script src="https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            FastClick.attach(document.body);
        }, false);
        (function () {
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>

</body>

</html>